<template>
	
	<view class="home">		
		<scroll-view scroll-x class="navscroll">
			<view class="item" 
			:class="index==navIndex ? 'active' : ''" v-for="(item,index) in navArr" 
			@click="clickNav(index,item.id)"
			:key="item.id"
			>{{item.classname}}</view>			
		</scroll-view>
		
		<view class="content" >
			<div class="row" v-for="item in newsArr" :key="item.id">
				<newsbox :item="item" @click.native="goDetail(item)"></newsbox>
			</div>
		</view>
		
		<view class="nodata" v-if="!newsArr.length">
			<image src="../../static/images/nodata.png" mode="widthFix"></image>
		</view>
		
		<view class="loading" v-if="newsArr.length">			
			<view v-if="loading==1">数据加载中...</view>
			<view v-if="loading==2">没有更多了~~</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navIndex:0,
				// 导航栏内容 例：国内  国际  体育等等
				navArr:[],
				// 封面 --- 新闻内容
				newsArr:[],
				currentPage:1,
				loading:0       //0默认  1加载中  2没有更多了
			}
		},
		// 页面加载执行方法
		onLoad() {
			this.getNavData();
			this.getNewsData();
			this.getIdeaData();
		},
		onReachBottom(){
			console.log("到底部了")
			if(this.loading==2){
				return;
			}
			this.currentPage++;
			this.loading=1;
			this.getNewsData();
		},
		
		methods: {
			//点击导航切换
			clickNav(index,id){
				this.navIndex=index;	
				this.currentPage=1;				
				this.newsArr=[]
				this.loading=0;
				this.getNewsData(id);
			},
			
			//跳转到详情页
			goDetail(item){				
				uni.navigateTo({
					url:`/pages/detail/detail?cid=${item.classid}&id=${item.id}`
				})
			},
			
			//获取导航列表数据
			getNavData(){
				uni.request({
					url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
					success:res=>{
						//console.log(res)
						
						this.navArr=res.data
						console.log("显示查询到的数据")
						console.log(res.data)
					}
				})
				// uni.request({
				// 	url:"http://localhost:8082/mgt/user/query",
				// 	success:res=>{
				// 		//console.log(res)
				// 		this.navArr=res.data
				// 		console.log("显示查询到的数据--- one")
				// 		console.log(res.data)
				// 	}
				// })
			
			},
			
			//获取新闻列表数据
			getNewsData(id=50){
				uni.request({
					url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
					data:{						
						cid:id,
						page:this.currentPage
					},
					success:res=>{
						console.log(res)
						if(res.data.length==0){
							this.loading=2
						}
						this.newsArr=[...this.newsArr,...res.data]
					}
				})
			},
			
			// 获取到外部数据
			getIdeaData(){
				uni.request({
					url:"http://localhost:8009/shop/mall-lists",
					//url:"http://localhost:8082/mgt/user/query",
					success:res=>{
						console.log(res)
						this.navArr=res.data
						console.log("显示查询到的数据--- one")
						console.log(res.data)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 导航栏样式
.navscroll{
	height: 100rpx;
	background: #F7F8FA;
	white-space: nowrap;
	position: fixed;
	top:var(--window-top);
	left:0;
	z-index: 10;
	/deep/ ::-webkit-scrollbar {
		width: 4px !important;
		height: 1px !important;
		overflow: auto !important;
		background: transparent !important;
		-webkit-appearance: auto !important;
		display: block;
	}
	.item{
		font-size: 40rpx;
		display: inline-block;
		line-height: 100rpx;
		padding:0 30rpx;
		color:#333;		
		&.active{
			color:#3ca1ff;
		}
	}
}

.content{
	padding:30rpx;
	padding-top:130rpx;	
	.row{
		border-bottom:1px dotted #efefef;
		padding:20rpx 0;
	}
}
.nodata{
	display: flex;
	justify-content: center;
	image{
		width: 360rpx;
	}
}
.loading{
	text-align: center;
	font-size: 26rpx;
	color:#888;
	line-height: 2em;
}
</style>
